

<template>
    <div class="left-top" ref="left1">

    </div>
</template>
<script setup>
import * as echarts from "echarts"
import { onMounted, ref } from 'vue';
let myChart = null
let left1 = ref(null)
let initOptions = () => {
    myChart = echarts.init(left1.value)
    myChart.setOption({
        title: {
            text: '商品销量分类',
            textStyle: {

                fontSize: '20',
                color: 'white',
            },
            left: '35%',
            top: "5%"
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: [
            {
                type: 'category',
                data: ['商超门店', '教育培训', '房地产', '生活服务', '汽车销售', '旅游酒店', '五金器材'],
                axisTick: {
                   show:false,
                },
                axisLabel:{
                    interval: 0,
                    color: '#eee'
                }
            }
        ],
        yAxis: [
            {
                type: 'value',
                min: 0,
                max: 1500,
                Interval: 300,
                axisLabel:{
                    color: '#eee'
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        width: '1',
                        type: 'solid',
                    }
                }
            }
        ],
        series: [
            {
                data: [200, 600, 300, 900, 1500, 1200, 600],
                type: 'bar',
                barWidth: 22,
               
                itemStyle: {
                    barBorderRadius: [8, 8, 8, 8],
                    color:'#409eff'
                },


            }
        ]
    });
}

onMounted(() => {
    initOptions()
})
</script>
<style scoped lang='scss'>
.left-top {
    width: 100%;
    height: 100%;
}
</style>